<html>
<title>the first our youtube movies</title>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="<?php echo base_url(); ?>css/default.css" type="text/css" rel="stylesheet" />
	<link href="<?php echo base_url(); ?>css/content.css" type="text/css" rel="stylesheet" />
        
        <title>Basic demo - jQuery Smooth Div Scroll</title>
	
	<!-- the CSS for Smooth Div Scroll -->
	<link rel="Stylesheet" type="text/css" href="<?php echo base_url(); ?>css/smoothDivScroll.css" />
	
	<!-- jQuery library - I get it from Google API's -->
	<script src="<?php echo base_url(); ?>script/jquery-1.6.2.min.js" type="text/javascript"></script>
	<!-- jQuery UI widget factory -->
	<!-- You can download it as a part of jQuery UI Core
		 http://jqueryui.com/download -->
	<script src="<?php echo base_url(); ?>script/jquery.ui.widget.js" type="text/javascript"></script>
	
	<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
	<script src="<?php echo base_url(); ?>script/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>

	<script type="text/javascript">
		// Initialize the plugin with no custom options
		$(window).load(function() {
			$("div#makeMeScrollable").smoothDivScroll({
                            autoScroll: "onstart" , 
                            autoScrollDirection: "backandforth", 
                            autoScrollStep: 1, 
                            autoScrollInterval: 1,	
                            startAtElementId: "startAtMe", 
                            visibleHotSpots: "always"
                        });                        
		});
	</script>

	<!-- Styles for my specific scrolling content -->
	<style type="text/css">
		#makeMeScrollable
		{
			
			height: 300px;
			position: relative;
		}
		
		#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			padding-right: 2px;
                        height: 300px;
                        width: 200px;
		}
	</style>
</head>
<body id="bg">
	<!-- background -->
		<div id="main_bg">
                    <div id="abc">
			<!--banner-->
			<div id="banner"></div>
			<!-- end banner -->
			
			<!-- menu -->
			<div id="main_menu">
				<div id="l_menu"></div>
				<div id="m_menu"></div>
				<div id="r_menu"></div>
			</div>
			<!-- end menu -->
                    </div>
			<!-- slide show -->
                               
            <div id="slideshow">
                <div id="makeMeScrollable">
                    <div class="scrollingHotSpotLeft">

                    </div>
                    <div class="scrollingHotSpotRight">

                    </div>
                    <div class="scrollWrapper">
                        <div class="scrollableArea">
                            <img src="<?php echo base_url(); ?>images/slide-1.jpg" alt="Demo image" />
                            <img src="<?php echo base_url(); ?>images/slide-2.jpg" alt="Demo image" />
                            <img src="<?php echo base_url(); ?>images/slide-3.jpg" alt="Demo image" />
                            <img src="<?php echo base_url(); ?>images/slide-4.jpg" alt="Demo image" />
                            <img src="<?php echo base_url(); ?>images/slide-2.jpg" alt="Demo image" />
                            <img src="<?php echo base_url(); ?>images/slide-1.jpg" alt="Demo image" />

                        </div>
                    </div>
                </div>
            </div>
            <!-- end slide show -->
			<!-- wrapper -->
			<div id="wrapper">
				<!----------------------------------------- left menu content--------------------->
				<div id="left_menu">
					<!-- search  -->
					<div id="search">
						<div class="search">search</div>
						<div class="search_form">
							<form>  
                                                            <label>Movie's name</label><br>
								<img src="<?php echo base_url(); ?>images/search.png" width="170px"/><br>
                                                                <label>Categories</label><br>
								<select name="cbx_cate">
                                                                    <option>--Tất cả--</option>
                                                                    <option>Hành động</option>
                                                                    <option>Kinh dị</option>
                                                                </select>
                                                                <br><span id="btn_s"><input type="button" value="search" ></input></span>
							</form>
						</div>
					</div>
					<!-- end search -->
					
					<!-- categories-->
					<div id="categories">
						<div class="categories">Categories</div>
						<div class="categories_list">
							<ul>
                                                            <?php
                                                            foreach($categoryList as $value){
                                                                echo "<li>" . $value['name'] . "</li>";
                                                            }
                                                            ?>
							</ul>
						</div>
                    </div>
					<!-- end categories-->
				</div>
				<!------------------------------------------- left menu content-------------------->
				
				<!--------------------------------------- content------------------------>
				<div id="content">
					<!-- latest review -->
					<div id="latest_review">
						<div class="latest_title">top movies</div>
						<div class="content">
                                                    <?php
                                                    $i = 0;                                                    
                                                    foreach($latestList as $movie){
                                                        $name = $movie['name'];
                                                        $vote = $movie['vote'];
                                                        echo "<div class=\"wrapper_content\">
							<div class=\"h_vote\">
								<div class=\"h_vote_point\"><img src=\"" . base_url() . "images/1.jpg\"/></div>
								<div class=\"h_vote_cm\">$vote</div>
							</div>
                                                        <div class=\"h_image\"><img src=\"" . base_url() . "images/slide-2.jpg\"/></div>
                                                        <div class=\"h_title\">$name</div>
							
                                                    </div>";
                                                    }
                                                    "kk \" n"
                                                    ?>
                                                    
                                                        <!-- end img hang 1-->
						</div>
						<div class="paging">1 > 2 > 3 > 4 >...>Next</div>
					</div>
					<!-- end latest review -->
					
					<!-- top movies -->
					<div id="top_movies">
						<div class="top_title">most review</div>
						<div class="content">
                                                    <?php
                                                    foreach($reviewList as $movie){
                                                        $name = $movie['name'];
                                                        $vote = $movie['vote'];
                                                        echo "<div class=\"wrapper_content\">
							<div class=\"h_vote\">
								<div class=\"h_vote_point\"><img src=\"" . base_url() . "images/1.jpg\"/></div>
								<div class=\"h_vote_cm\">$vote</div>
							</div>
                                                        <div class=\"h_image\"><img src=\"" . base_url() . "images/slide-2.jpg\"/></div>
                                                        <div class=\"h_title\">$name</div>
                                                    </div>";
                                                    }
                                                    ?>
						</div>
						<div class="paging">1 > 2 > 3 > 4 >...>Next</div>
					</div>
					<!-- end top movies -->
				</div>
				<!--------------------------------- end content------------------------------->
				
			</div>
			<!-- end wrapper -->
			
			<!-- footer -->
			<div id="footer"></div>
			<!-- end footer -->
			
		</div>
	<!-- end background -->
</body>
</html>